import React from "react";
import { observer, inject } from "mobx-react";
import * as mobx from "mobx";
import { WeaSelect, WeaTable, WeaTools, WeaHelpfulTip, WeaInput, WeaFormItem } from "ecCom";
import { Button, Table } from "antd";
import * as _ from "../../util/common";
import { singleConvert, conver2name, getStepType, getRowIndex, getFieldid, getTriType, getLinkageType } from "../../util/analyzeUtil";
import WeaSelectTransfer from "./wf-selectitem-browser/WeaSelectTranfer";

@inject("analyzeStore")
@observer
export default class FieldChangeInfo extends React.Component {
	constructor(props) {
		super(props);
	}

	render() {
		const { fieldMap, showFieldID, fieldChange_typeValue, fieldOptions, fieldChange_fieldValue } = this.props.analyzeStore;
		const columns = [
			{
				title: <p>{"步骤"}</p>,
				dataIndex: "step",
				key: "step",
				width: "10%"
			},
			{
				title: <p>{"变更类型"}</p>,
				dataIndex: "type",
				key: "type",
				width: "10%"
			},
			{
				title: <p style={{ textAlign: 'center' }}>{"变更数据"}</p>,
				dataIndex: "changedDatas",
				key: "changedDatas",
				render: (text, record, index) => {
					return (
						text &&
						<div className="wf-fieldChange-renderTable">
							<table border="1px">
								<tr className="wf-fieldChange-heightlight">
									<th align="center">变更字段</th>
									<th align="center" width="10%">明细行号</th>
									<th align="center">变更类型</th>
									<th align="center">变更结果</th>
								</tr>
								{text.map((items, index) => {
									return (
										<tr className={index % 2 == 1 ? "wf-fieldChange-heightlight" : ""}>
											<td align="center">{singleConvert(items.fieldMark.substring(5), fieldMap, showFieldID)}</td>
											<td align="center">{getRowIndex(items.fieldMark)}</td>
											<td align="center">{getTriType(items.type)}</td>
											<td align="center">{items.result.value || items.result.viewAttr}</td>
										</tr>
									);
								})}
							</table>
						</div>
					);
				}
			},
			{
				title: <p>{"联动信息"}</p>,
				dataIndex: "linkageInfo",
				key: "linkageInfo",
				width: "20%",
				render: (text, record, index) => {
					let tableMark = text && text.tableMark;
					let triType = text && text.triType;
					let triFieldid = text && text.triFieldid;
					let linkageType = text && text.linkageType;
					let rowIndex = text && text.rowIndex; //明细行下标
					let linkageSql = text && text.linkageSql;
					return (
						<div className="wf-fieldChange-table-linkageInfo">
							<div className="wf-fieldChange-linkageInfoStyle">
								{triType && `触发类型：${getTriType(triType)}`}
							</div>
							<div className="wf-fieldChange-linkageInfoStyle">
								{tableMark && (triFieldid ? null : `触发来源：${conver2name(tableMark, rowIndex)}`)}
							</div>
							<div className="wf-fieldChange-linkageInfoStyle">
								{triFieldid && `触发来源：${singleConvert(triFieldid, fieldMap, showFieldID, rowIndex)}`}
							</div>
							<div className="wf-fieldChange-linkageInfoStyle">
								{linkageType && `联动类型：${getLinkageType(linkageType)}`}
							</div>
							{linkageSql &&
								<WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@sassmq@linkageSql`}
									label={"联动涉及sql"}
									labelCol={{ span: 8 }}
									wrapperCol={{ span: 12 }}
								>
									{linkageSql.map(str => {
										return (
											<div className="wf-fieldChange-linkageInfoStyle">
												<WeaInput ecId={`${this && this.props && this.props.ecId || ''}_WeaInput@zr79im@`}
													value={WeaTools.Base64.decode(str)}
													viewAttr={1}
												/>
											</div>
										);
									})}
								</WeaFormItem>
							}
							{/* {text &&
								<div className="wf-fieldChange-linkageInfoStyle">
									<p onClick={() => this.showLinkageInfo(text)}>联动信息记录</p>&nbsp;&nbsp;
                                    <WeaHelpfulTip
										title="点击链接后数据会输出在控制台"
										placement="bottomLeft"
									/>
								</div>
							} */}
						</div>
					);
				}
			}
		];
		return (
			<div className="wf-analyze-fieldChangeInfo">
				<div className="wf-fieldChange-queryItems">
					<WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@k188ss`}
						style={{ width: "30%" }}
						label={"字段变更类型"}
						labelCol={{ span: 6 }}
						wrapperCol={{ span: 10 }}
					>
						<WeaSelect ecId={`${this && this.props && this.props.ecId || ''}_WeaSelect@n6g86v`}
							options={[
								{ key: "0", showname: "全部" },
								{ key: "1", showname: "初始加载" },
								{ key: "2", showname: "添加明细行" },
								{ key: "3", showname: "手动变更" },
								{ key: "4", showname: "同步联动" },
								{ key: "5", showname: "异步联动" },
								{ key: "6", showname: "接口修改" }
							]}
							value={fieldChange_typeValue}
							onChange={this.typeChange.bind(this)}
						/>
					</WeaFormItem>
					<WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@s2zhxa`}
						style={{ width: "70%" }}
						label={"查询字段"}
						labelCol={{ span: 2 }}
						wrapperCol={{ span: 12 }}
					>
						<WeaSelectTransfer ecId={`${this && this.props && this.props.ecId || ''}_WeaSelectTransfer@1ruzdg`}
							value={fieldChange_fieldValue}
							options={fieldOptions}
							onChange={this.fieldChange.bind(this)}
						/>
					</WeaFormItem>
				</div>
				<div className="wf-fieldChange-table">
					<WeaTable ecId={`${this && this.props && this.props.ecId || ''}_WeaTable@qsjlst`}
						dataSource={this.getDataSource()}
						columns={columns}
						pagination={{ showQuickJumper: true, defaultPageSize: 20 }}
					/>
				</div>
			</div>
		);
	}
	getDataSource = () => {
		const { onlyShowlinkage, fieldChange_typeValue, fieldChange_fieldValue } = this.props.analyzeStore;
		const { modifyStep } = window.opener.WfForm_analyzeData;
		let dataSource = [];
		modifyStep && _.forIn(modifyStep, (value, key) => {
			let rowData = {};
			let step = key.substring(5);
			let type = value.type;
			let changedDatas = value.datas;
			let linkageInfo = value.otherinfo;
			let children = [];
			rowData["key"] = step;
			rowData["step"] = step;
			rowData["type"] = getStepType(type);
			_.isEmpty(linkageInfo) ? null : rowData["linkageInfo"] = linkageInfo; //联动信息
			_.isEmpty(changedDatas) ? null : rowData["changedDatas"] = changedDatas; //变更数据
			dataSource.push(rowData);
		});
		dataSource = onlyShowlinkage ? dataSource.filter(item => item.type == "同步联动" || item.type == "异步联动") : dataSource;
		fieldChange_typeValue && (
			fieldChange_typeValue == "0" && null,
			fieldChange_typeValue == "1" && (dataSource = dataSource.filter(item => item.type === "初始加载")),
			fieldChange_typeValue == "2" && (dataSource = dataSource.filter(item => item.type === "添加明细行")),
			fieldChange_typeValue == "3" && (dataSource = dataSource.filter(item => item.type === "手动变更")),
			fieldChange_typeValue == "4" && (dataSource = dataSource.filter(item => item.type === "同步联动")),
			fieldChange_typeValue == "5" && (dataSource = dataSource.filter(item => item.type === "异步联动")),
			fieldChange_typeValue == "6" && (dataSource = dataSource.filter(item => item.type === "接口修改"))
		);
		//根据字段查询
		let fieldList = !!fieldChange_fieldValue ? fieldChange_fieldValue.split(",") : [];
		let filterData = dataSource;
		fieldList.length == 0 ? null : filterData.filter(item => {
			let newChangedDatas = [];
			newChangedDatas = item.changedDatas && item.changedDatas.filter(o => {
				return _.includes(fieldList, getFieldid(o.fieldMark));
			});
			item.changedDatas = newChangedDatas;
			return item.changedDatas && item.changedDatas.length > 0;
		});
		//查询后去掉没有数据 行
		filterData = filterData.filter(item => item.changedDatas && item.changedDatas.length !== 0);

		return fieldList.length == 0 ? dataSource : filterData;
	};

	showLinkageInfo = content => {
		if (window.console) console.log(content);
	};

	typeChange = value => {
		const { fieldChange_typeChange } = this.props.analyzeStore;
		fieldChange_typeChange(value);
	};

	fieldChange = strArr => {
		const { fieldChange_changeFieldValue } = this.props.analyzeStore;
		fieldChange_changeFieldValue(strArr);
	};
}
